<template>
  <wd-popup v-model="props.showCustomerServicePopup" custom-style="border-radius:10rpx;" :lockScroll="false" @close="handleClose">
    <view class="customer-service-container">
      <image class="img-bg" src="http://img.abatour.com/2025-05-03/%E5%9B%BE%E5%B1%82%201197_1746265619779.png"></image>
      <image class="logo-img" src="http://img.abatour.com/2025-05-03/%E5%9B%BE%E5%B1%82%201191@2x_1746265919654.png"></image>
      <view class="contact-container">
        <view class="label-container">联系商家</view>
        <view class="mobile-number">186 5245 2626</view>
        <view class="label-container mt30">联系平台</view>
        <view class="mobile-number">400-588-566</view>
      </view>
    </view>
  </wd-popup>
  <view class="close-circle-container" v-if="props.showCustomerServicePopup" @click="handleClose">
    <wd-icon name="close-circle" size="28px" color="#ffffff"></wd-icon>
  </view>
</template>

<script setup>
  const props = defineProps({
    showCustomerServicePopup: {
      type: Boolean,
      default: false
    }
  })
  const emits = defineEmits(["closePopup"]);

  const handleClose = () => {
    emits("closePopup");
  };

</script>

<style lang="scss" scoped>
  .customer-service-container {
    position: relative;
    width: 555.5rpx;
    height: 516.5rpx;
    .img-bg {
      width: 100%;
      height: 100%;
      background-size: cover;
    }
    .logo-img {
      position: absolute;
      top: 30rpx;
      left: 50%;
      margin-left: -88.5rpx;
      width: 177rpx;
      height: 155.5rpx;
      background-size: cover;
    }
    .contact-container {
      position: absolute;
      bottom: 67rpx;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      .label-container {
        width: 117.5rpx;
        margin-bottom: 15rpx;
        font-size: 25rpx;
        padding: 6rpx 9rpx;
        border-radius: 10rpx;
        border: 1px solid #C0C2B3;
      }
      .mobile-number {
        font-size: 33rpx;
        font-weight: bold;
      }
    }
  }
  .close-circle-container {
    position: absolute;
    left: 0;
    bottom: 460rpx;
    width: 100%;
    text-align: center;
    z-index: 99999 !important;
  }
</style>